<script setup lang="ts">
import { reactive, onMounted } from "vue";
import api from "@/api/blog/share";
import apiRead from "@/api/blog/read";
import { useRouter } from "vue-router";
import { getDict } from "@/utils/local";
let router = useRouter();
let state = reactive({
    list: [] as any[],
});
onMounted(async () => {
    const res: any = await api.getlist({});
    state.list = dealList(res.data);



});
const open = (cItem: any) => {
    readShare(cItem._id)
    window.open(cItem.targetUrl);
};
//处理数据
const dealList = (list: Array<any>) => {
    //获取share_type所有的子项
    const dict = getDict('share_type');
    const arr = dict.map((item: any) => {
        return { tag: item.value, label: item.label, child: [] };
    });

    arr.forEach((item: any) => {
        const matchingChild = list.filter((cItem) => cItem.tag === item.tag);
        if (matchingChild) {
            item.child.push(...matchingChild);
        }
    });
    return arr;
};

//点击分享
const readShare = (_id: any) => {
    api.readShare({ _id })//具体的分享阅读加1
    apiRead.update({ path: router.currentRoute.value.name })//总的分享+1
}

</script>
<template>
    <div class="share-warp">
        <div v-for="item in state.list">
            <div class="share-type animate__animated animate__lightSpeedInLeft">{{ item.label }}</div>
            <div class="share-box">
                <div class="share-item animate__animated animate__lightSpeedInLeft" @click="open(cItem)" :key="cIndex"
                    v-for="(cItem, cIndex) in item.child">
                    <div class="left"><img class="share-img" :src="cItem.coverUrl" alt="" /></div>
                    <div class="right">
                        <span class="title s1"> {{ cItem.title }} </span>
                        <span class="desc s1"> {{ cItem.desc }} </span>
                    </div>
                    <div class="shadow">
                        <div class="title s1">{{ cItem.targetUrl }}</div>
                    </div>
                </div>
                <div class="share-item" style="height: 0px; padding: 0; margin: 0; border: none" key="share-item1"></div>
                <div class="share-item" style="height: 0px; padding: 0; margin: 0; border: none" key="share-item2"></div>
            </div>
        </div>

        <div class="share-item" style="height: 0px; border: none" key="share-item"></div>
    </div>
</template>
<style lang="scss" scoped>
.share-warp {
    .share-box {
        justify-content: space-between;
        display: flex;
        flex-wrap: wrap;
        padding: 10px;
    }

    .share-type {
        font-size: 16px;
        color: #606266;
        font-weight: 700;
        margin-left: 15px;
    }

    .share-item {
        width: 280px;
        padding: 5px 10px;
        border: 1px solid var(--c-border);
        display: flex;
        margin-bottom: 20px;
        border-radius: 3px;
        cursor: pointer;

        .left {
            display: flex;
            align-items: center;
            height: 60px;
            margin-right: 15px;

            .share-img {
                width: 50px;
                height: 50px;
                background: cover;
                display: block;
            }
        }

        .right {
            display: flex;
            flex-direction: column;

            .title {
                font-weight: 700;
                font-size: 16px;
            }

            .desc {
                color: var(--c-text-3);
            }
        }

        .shadow {
            width: 100%;
            height: 70px;
            position: absolute;
            left: 0;
            top: 0;
            transition: 0.5s;
            background-color: rgba($color: #000000, $alpha: 0);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            .title {
                width: 100%;
                text-align: center;
                color: white;
                text-shadow: #fff 0 0 8px; //字体发光
                font-size: 16px;
                transition: 0.7s;
                opacity: 0;
                padding: 0 20px;
            }
        }

        &:hover {
            box-shadow: 0 10px 10px 0px var(--c-shadow);
        }

        &:hover .shadow {
            background-color: rgba($color: #000000, $alpha: 0.5);
        }

        &:hover .shadow .title {
            opacity: 1;
        }
    }

    @media (max-width: 560px) {

        //分享
        .share-item {
            width: 100%;

            &:hover {
                box-shadow: none !important;
            }

            &:hover .shadow {
                background-color: rgba($color: #000000, $alpha: 0) !important;
            }

            &:hover .shadow .title {
                opacity: 0 !important;
            }
        }
    }
}
</style>
